<div class="page"  (click)="click($event)">
    <article>
        <section class="box1" *ngIf="selectedbox != 1"
         (mouseenter)="box1_enter()" (mouseleave)="box1_leave()"
        [style.background-color]="box1_imh ? 'rgba(0,0,0,.1)':'white'">
            <h1 >{{ name }}<span *ngIf="name==''">Name</span></h1>
            <h2>
                <pre>{{ sex }}<span *ngIf="sex==''">Sex</span>  |  {{ grade }}<span *ngIf="grade==''">Grade</span>  |  {{ academy }}<span *ngIf="academy==''">Academy</span></pre>
            </h2>
            <h2>phone: {{ phone }}<span *ngIf="phone==''">&nbsp;&nbsp;&nbsp; Phone-Number</span></h2>
            <h2>e-mail: {{ email }}<span *ngIf="email==''">&nbsp;&nbsp;&nbsp; E-mail</span></h2>
        </section>
        <section class="box1_edit" *ngIf="selectedbox == 1"
        (mouseenter)="box1_enter()" (mouseleave)="box1_leave()" >
        <h1>
            <input type="text" size="8" placeholder="Name" [(ngModel)]="name" pInputText>
        </h1>
        <h2><input type="text" size="1" placeholder="Sex" [(ngModel)]="sex" pInputText>
            &nbsp;&nbsp;&nbsp;<input type="text" size="8" placeholder="Grade" [(ngModel)]="grade" pInputText>
            &nbsp;&nbsp;&nbsp;<input type="text" size="20" placeholder="Academy" [(ngModel)]="academy" pInputText>
        </h2>
        <h2><input type="text" size="16" placeholder="Phone" [(ngModel)]="phone" pInputText></h2>
        <h2><input type="text" size="20" placeholder="E-mail" [(ngModel)]="email" pInputText></h2>
        </section>
        <section class="box2">
            <p-selectButton [options]="choices" [(ngModel)]="choice"></p-selectButton>
        </section>

        <section class="box3" *ngIf="selectedbox != 3"
        (mouseenter)="box3_enter()" (mouseleave)="box3_leave()"
        [style.background-color]="box3_imh ? 'rgba(0,0,0,.1)':'white'" >
            <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
                科研经历</h3>
                <div class="htmlrender">
                    <div [innerHTML]="experience">
                </div>
            </div>
            <span *ngIf="experience=='' || experience==null">
                <pre>   参加过什么科技竞赛</pre>
                <pre>   制作过什么科技作品</pre>
            </span>
        </section>
        <section class="box3_edit" *ngIf="selectedbox == 3"
        (mouseenter)="box3_enter()" (mouseleave)="box3_leave()">
        <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
            科研经历</h3>
            <p-editor [(ngModel)]="experience" [style]="{'height':'320px'}" placeholder="参加过什么科技竞赛，制作过什么科技作品。"></p-editor>  
        </section>

        <section class="box4" *ngIf="selectedbox != 4"
        (mouseenter)="box4_enter()" (mouseleave)="box4_leave()"
        [style.background-color]="box4_imh ? 'rgba(0,0,0,.1)':'white'" >
            <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
                技术特长</h3>
                <div class="htmlrender">
                    <div [innerHTML]="expert">
                </div>
            </div>
            <span *ngIf="expert=='' || expert==null">
                <pre>   擅长使用什么软件</pre>
                <pre>   研究过什么算法</pre>
                <pre>   会使用单片机吗</pre>
            </span>
        </section>
        <section class="box4_edit" *ngIf="selectedbox == 4"
        (mouseenter)="box4_enter()" (mouseleave)="box4_leave()">
        <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
            技术特长</h3>
            <p-editor [(ngModel)]="expert" [style]="{'height':'320px'}" placeholder="擅长使用什么软件,研究过什么算法,会使用单片机吗."></p-editor>  
        </section>

        <section class="box5" *ngIf="selectedbox != 5"
        (mouseenter)="box5_enter()" (mouseleave)="box5_leave()"
        [style.background-color]="box5_imh ? 'rgba(0,0,0,.1)':'white'" >
            <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
                为什么想加入机器人队</h3>
                <div class="htmlrender">
                    <div [innerHTML]="why"></div>
                </div>
            <span *ngIf="why=='' || why==null">
                <pre>   职业方向？</pre>
                <pre>   兴趣？</pre>
                <pre>   消磨时间？</pre>
            </span>
        </section>
        <section class="box5_edit" *ngIf="selectedbox == 5"
        (mouseenter)="box5_enter()" (mouseleave)="box5_leave()">
        <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
            为什么想加入机器人队</h3>
            <p-editor [(ngModel)]="why" [style]="{'height':'320px'}" placeholder="职业方向？ 兴趣？ 消磨时间？"></p-editor>  
        </section>

        <section class="box6" *ngIf="selectedbox != 6"
        (mouseenter)="box6_enter()" (mouseleave)="box6_leave()"
        [style.background-color]="box6_imh ? 'rgba(0,0,0,.1)':'white'" >
            <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
                建议或意见</h3>
                <div class="htmlrender">
                    <div [innerHTML]="suggestion"></div>
                </div>
            <span *ngIf="suggestion=='' || suggestion==null">
                <pre>   你心目中的机器人队是什么样子的？</pre>
                <pre>   你希望在这里收获什么？</pre>
                <pre>   对机器人队有什么建议？</pre>
            </span>
        </section>
        <section class="box6_edit" *ngIf="selectedbox == 6"
        (mouseenter)="box6_enter()" (mouseleave)="box6_leave()">
        <h3><span><i class="fa fa-th-large" aria-hidden="true" style="color:#2f54eb"></i></span>
            建议或意见</h3>
            <p-editor [(ngModel)]="suggestion" [style]="{'height':'320px'}" placeholder="你心目中的机器人队是什么样子的？ 你希望在这里收获什么？ 对机器人队有什么建议？"></p-editor>  
        </section>
    </article>
    <div class="bulletin">
        <ul>
            <li>填写内容应真实详细，必要请配插图</li>
            <li>发送邮件后24小时内，注意查收回信</li>
        </ul>
        <div class="clickref clearf">
            <div class="abox fl">
                <a (click)="submit()">提交</a>
            </div>
           <div class="abox fl">
                <a (click)="generatePDF()">下载pdf</a>
           </div>
        </div>
    </div>
</div>
